<template>
	<el-container>
		<el-header class="tablet-header">
			<div class="left-panel">
				<div class="left-panel-search"></div>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-radio-group v-model="inputMode" style="width: 100%;">
						<el-radio-button label="manaul">手动</el-radio-button>
						<el-radio-button label="auto">自动</el-radio-button>
						<el-radio-button label="semi">半自动</el-radio-button>
					</el-radio-group>
					<el-input
						ref="inputRef"
						v-model.trim="reqParams.sn"
						:disabled="inputMode !== 'manaul'"
						clearable
						prefix-icon="el-icon-search"
						placeholder="输入 SN 按回车键查询"
						@keyup.enter="search" />
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<div class="tablet-content">
				<el-row :gutter="8">
					<el-col :span="18">
						<el-card class="tablet-card">
							<el-table ref="tableRef" row-key="id" :data="tableData" class="tablet-table">
								<el-table-column prop="sn" label="SN" align="center" width="180" />
								<el-table-column prop="opCode" label="工位编号" align="center" width="100" />
								<el-table-column prop="procCode" label="工序编号" align="center" width="100" />
								<el-table-column prop="passResult" label="过站结果" align="center" width="100">
									<template #default="scope">
										<el-tag :type="passResultType(scope.row.passResult)">
											{{ scope.row.passResultDesc }}
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="inboundTime" label="进站时间" align="center" width="140" />
								<el-table-column prop="outboundTime" label="出站时间" align="center" />
								<el-table-column prop="cycleTime" label="用时(s)" align="center" />
								<!-- <el-table-column prop="operator" label="操作员" align="center" /> -->
							</el-table>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card class="tablet-card">
							<div style="margin: 5px 10px">
								<el-empty v-if="!activities?.length"></el-empty>
								<el-timeline v-else>
									<el-timeline-item
										v-for="(activity, index) in activities"
										:key="index"
										:icon="activity.icon"
										:type="activity.type"
										:color="activity.color"
										:size="activity.size"
										:hollow="activity.hollow"
										:timestamp="activity.timestamp">
										{{ activity.content }}
									</el-timeline-item>
								</el-timeline>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</el-main>
	</el-container>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { IActivity, ITableData } from './model';

const instance = getCurrentInstance();
const proxy2 = {
	proxy: instance?.proxy,
	globalProp: instance!.appContext.config.globalProperties,
};

defineProps({
	lineCode: { type: String, required: false },
	opCode: { type: String, required: false },
});

const inputRef = ref();

const inputMode = ref('manaul'); // manaul/auto/semi
const reqParams = reactive({
	sn: '' // 查询 SN
});
const tableData = ref<ITableData[]>([]);
const activities = ref<IActivity[]>([]);
let focusTimer: any;

onMounted(() => {
	focusTimer = setInterval(() => {
		if (inputMode.value === 'manaul') {
			inputRef.value.focus();
		}
	}, 2000);
})

onUnmounted(() => {
	if (focusTimer) {
		clearInterval(focusTimer);
		focusTimer = null;
	}
})

function passResultType(type: number): string {
	switch (type)
	{
		case 1: return '';
		case 2: return 'danger';
		default: return 'info';
	}
}

function passResultType2(type: number): string {
	switch (type)
	{
		case 1: return 'primary';
		case 2: return 'danger';
		default: return 'info';
	}
}

async function search(): Promise<void> {
	await getData();
	reqParams.sn = '';
}

async function getData(): Promise<void> {
	tableData.value = [];
	activities.value = [];
	if (!reqParams.sn) {
		return;
	}

	const resp = await proxy2.globalProp.$API.prodtranssnrecord.list.get(reqParams);
	const data = resp.data;
	if (!data || !data.length) {
		proxy2.globalProp.$message.warning(`没找到条码 "${reqParams.sn}" 对应的作业记录`);
		return;
	}

	tableData.value = data;

	// 计算时间线
	const routingId = tableData.value[0].routingId;
	const resp1 = await proxy2.globalProp.$API.procroutingitem.listbyroutingid.get(routingId);
	const proclist = resp1.data;
	if(!proclist || !proclist.length) {
		// 没有找到工艺路线，使用产品实际的过站路线显示
		tableData.value!.forEach(item => {
			const activity = {
				content: item.opCode,
				timestamp: item.outboundTime,
				type: passResultType2(item.passResult),
			};
			activities.value?.push(activity);
		});

		return;
	}

	// 工艺路线与产品工位进行比对（此处简化处理，只获取在对应工序上最近一次的数据）
	const data2 = tableData.value.slice().reverse(); // 拷贝后再反转
	proclist.forEach((proc: any) => {
		const activity: IActivity = { content: '', timestamp: '', type: '' };

		const item = data2?.find(s => s.procCode === proc.procCode);
		if (item) {
			activity.content = item.opCode;
			activity.timestamp = item.outboundTime;
			activity.type = passResultType2(item.passResult);
		} else {
			activity.content = proc.procCode;
			// 还未过站的工序，且为"可选工序"，显示 "黄色"
			if (proc.ctlAttr === 2) {
				activity.type = 'warning';
			}
		}

		activities.value.push(activity);
	});
}
</script>

<style lang="scss" scoped>
.tablet-header {
    height: 42px;
}

.tablet-content {
	height: 100%;
	margin: 0 4px; // 用于抵消 el-row.gutter 产生的水平滚动条
}

.tablet-card {
	height: 98%;
}

.tablet-content :deep(.el-row) {
	height: 100%;
}

.tablet-card>:deep(.el-card__body) {
	height: 100%;
}

.tablet-table {
	height: 100%;
}
</style>
